import { Input, InputNumber, Form, Button, DatePicker } from 'antd'
import dayjs from 'dayjs'
import { WordsInput } from '@/desktop/components/words'
import { WordType } from '@/services/common/definition/word'
import { Target } from '../logics'
import { commonS } from './style'
import { type Editing } from './index'

type Values = Pick<Editing, 'name' | 'content' | 'startAt' | 'delay'>

export function SetContent({
  editing,
  goPrev: rawGoPrev,
  goNext: rawGoNext,
}: {
  editing: Editing
  goPrev: (updates: Partial<Values>) => void
  goNext: (updates: Partial<Values>) => Promise<void>
}) {
  const [form] = Form.useForm<Values>()
  const [initialValues] = useState(() => {
    const content =
      editing.targetType !== Target.群
        ? editing.content.filter(v => v.type !== WordType.GroupAt)
        : editing.content
    return { ...editing, content }
  })

  function goPrev() {
    rawGoPrev(form.getFieldsValue())
  }
  const [submitting, setSubmitting] = useState(false)
  async function save(values: Values) {
    setSubmitting(true)
    await rawGoNext({
      name: values.name,
      content: values.content,
      startAt: values.startAt && values.startAt.isAfter(dayjs()) ? values.startAt : null,
      delay: values.delay,
    })
    setSubmitting(false)
  }

  return <Form
    css={commonS.wrap}
    form={form}
    initialValues={initialValues}
    onFinish={save}
    labelCol={{ span: 3 }}
  >
    <main css={s.fieldsWrap}>
      <div css={s.fields}>
        <Form.Item label="任务名称" name="name" rules={[{ required: true }]}>
          <Input maxLength={30} placeholder="输入任务名称" />
        </Form.Item>

        <Form.Item
          label="消息内容"
          name="content"
          extra="发送给每个客户/群的消息内容，最多可添加 10 条"
          rules={[{ required: true, message: '请指定消息内容' }]}
        >
          <WordsInput
            enableLibrary
            limit={10}
            extraTypes={
              editing.targetType === Target.群
                ? [WordType.GroupInvite, WordType.GroupAt]
                : [WordType.GroupInvite]
            }
            editorProps={{ [WordType.GroupInvite]: { wxids: editing.wxids } }}
          />
        </Form.Item>

        <Form.Item
          label="开始时间"
          name="startAt"
          extra="开始发送的时间，不指定或早于当前时间则立刻开始"
        >
          <DatePicker showTime />
        </Form.Item>

        <Form.Item
          label="消息间隔"
          name="delay"
          extra="两条消息的发送间隔，在 1 ~ 60 秒之间，较大的间隔不容易触发风控。"
          rules={[{ required: true }]}
        >
          <InputNumber suffix="秒" precision={2} min={1} max={60} />
        </Form.Item>
      </div>
    </main>

    <footer css={commonS.footer}>
      <Button size="large" onClick={goPrev}>
        上一步
      </Button>
      <Button type="primary" htmlType="submit" size="large" disabled={submitting}>
        {submitting ? '保存中' : '保存'}
      </Button>
    </footer>
  </Form>
}

const s = {
  fieldsWrap: css`
    flex-shrink: 1;
    overflow-y: auto;
    padding-top: 20px;
  `,
  fields: css`
    margin: 0 auto;
    width: 700px;
    .ant-input-number-affix-wrapper {
      width: 90px;
    }
  `,
}
